Stage 1: Frontend Foundations

P&ID SVG Viewer

Practice SVG transforms and accessible interaction patterns by exploring a miniature process and instrumentation diagram. Zoom, pan, and highlight equipment to read contextual callouts.

Interactive canvas

Feedwater preheat loop snapshot

Use the viewer controls or keyboard shortcuts to inspect the diagram. Press Tab to focus pumps, valves, and heat exchangers; tooltips announce additional detail through an ARIA live region.

Keyboard map

Arrow keys Pan the diagram
+ / - Zoom in or out
0 Reset zoom and center
Tab Focus equipment hotspots sequentially
Enter or Space Repeat tooltip announcement

Viewer controls

Scale: 100%

—

Use Enter or Space to repeat the tooltip announcement. Arrow keys pan while a component has focus.

Back to top